<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>个人设置</title>
    <link href="../css/settingInfo.css" rel="stylesheet" type="text/css">

</head>
<body>
<div class="box_title">
    <img src="../images/logo.png" class="logo">
    <span class="title">项目文档管理系统</span>
    <div class="back_settingInfo"><span>返回</span></div>
</div>
<div class="box_setting">
    <div class="setting_menu">
        <div>
            <img src="../images/main/person-img.png" class="person-img">
            <span class="user_name">高富帅</span>
        </div>
        <ul>
            <li class="nowLi">基本资料</li>
            <li>修改密码</li>
            <li>权限管理</li>
            <li>头像设置</li>
            <li></li>
        </ul>
    </div>
    <div class="setting_detail">
        <div class="setting_title">
            <p>基本资料</p>
            <div class="saveInfo"><button name="saveInfo">保 存</button></div>
        </div>
        <div class="box_detail">
            <form class="form active">
                <div>
                    <label class="firstLabel">姓名：</label>
                    <input type="text">
                    <label></label>
                </div>
                <div>
                    <label class="firstLabel">性别：</label>
                    <input type="radio" name="sex" value="male">男&nbsp;&nbsp;
                    <input type="radio" name="sex" value="female">女
                </div>
                <div>
                    <label class="firstLabel">手机号：</label>
                    <input type="text">
                    <label></label>
                </div>
                <div>
                    <label class="firstLabel">地址：</label>
                    <input type="text">
                    <label></label>
                </div>
                <div>
                    <label class="firstLabel">邮箱：</label>
                    <input type="text">
                    <label></label>
                </div>
                <div>
                    <label class="firstLabel">个人说明：</label>
                    <textarea rows="10" cols="60">介绍一下自己吧</textarea><!--<textarea></textarea>之间不能有空格,否则光标初始位置没有在最左上角-->
                </div>
            </form><!--基本资料-->
            <form class="form">
                <div>
                    <label class="firstLabel">原始密码：</label>
                    <input type="password">
                    <label class="secondLabel"></label>
                </div>
                <div>
                    <label class="firstLabel">修改密码：</label>
                    <input type="password">
                    <label class="secondLabel"></label>
                </div>
                <div>
                    <label class="firstLabel">确认密码：</label>
                    <input type="password">
                    <label class="secondLabel"></label>
                </div>
            </form><!--修改密码-->
            <form class="form">
                <div>
                    <label class="firstLabel">部门：</label>
                    <select name="department">
                        <option value="xuanze" selected>请选择</option>
                        <option value="yunying">运营部</option>
                        <option value="yewu">业务部</option>
                        <option value="ceshi">测试部</option>
                    </select>
                </div>
                <div>
                    <label class="firstLabel">权限：</label>
                    <select name="authority">
                        <option value="xuanze" selected>请选择</option>
                        <option value="super_manager">超级管理员</option>
                        <option value="manager">管理员</option>
                        <option value="user">普通用户</option>
                    </select>
                </div>
            </form><!--权限设置-->
            <div class="form container">
                <div class="imageBox">
                    <div class="thumbBox"></div>
                    <div class="spinner" style="display: none">Loading...</div>
                </div>
                <div class="action">
                    <div class="new-contentarea tc">
                        <a href="javascript:void(0)" class="upload-img">
                            <label for="upload-file">上传图像</label>
                        </a>
                        <input type="file" class="" name="upload-file" id="upload-file" />
                    </div>
                    <input type="button" id="btnZoomIn" class="Btnsty_peyton enlarge" value="+"  />
                    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
                    <input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁剪" />
                </div>
                <div class="cropped"></div>
            </div><!--头像设置-->
        </div>
        </div>
    </div>
</div>
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/settingInfo.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        var options =
            {
                thumbBox: '.thumbBox',
                spinner: '.spinner',
                imgSrc: '../images/avatar.jpg'
            }
        var cropper = $('.imageBox').cropbox(options);
        $('#upload-file').on('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })
        $('#btnCrop').on('click', function(){
            var img = cropper.getDataURL();
            $('.cropped').html('');
            $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
        })
        $('#btnZoomIn').on('click', function(){
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function(){
            cropper.zoomOut();
        })
    });
</script>
</body>
</html>